<template>
  <view class="index">
    <!-- 1.0 搜索框 -->
    <ugo-search></ugo-search>

    <!-- 1.0 搜索框 -->

    <!-- 2.0 轮播图 -->
    <!-- 
      轮播图的宽度 / 原图片的宽度  =  轮播图的高度   / 原图片的高


      轮播图的高度 = 原图片的高 * 轮播图的宽度 /   原图片的宽度
      轮播图的高度 = 原图片的高 * 轮播图的宽度 /   原图片的宽度
                  =  340 * 750rpx /  750 
                  = 340rpxx
     -->
    <u-swiper height="340rpx" indicator indicatorMode="line" keyName="image_src" circular autoplay :list="swiperList"></u-swiper>
    <!-- 2.0 轮播图 -->

    <!-- 3.0 导航栏 -->
    <view class="navs">
      <navigator v-for="item in navs" :key="item.name">
        <u--image width="100%" mode="widthFix" :src="item.image_src"></u--image>
      </navigator>
    </view>
    <!-- 3.0 导航栏 -->

    <!-- 4.0 楼层 -->
    <view class="floor">
      <view class="floor-group" v-for="item1 in floorList" :key="item1.floor_title.name">
        <!-- 4.1 标题 -->
        <view class="floor-group-title">
          <u--image width="100%" mode="widthFix" :src="item1.floor_title.image_src"></u--image>
        </view>
        <!-- 4.2 内容 -->
        <view class="floor-group-content">
          <navigator v-for="(item2, index2) in item1.product_list" :key="item2.name">
            <u--image v-if="index2 === 0" width="100%" mode="widthFix" :src="item2.image_src"></u--image>

            <u--image v-else width="100%" height="188rpx" mode="scaleToFill" :src="item2.image_src"></u--image>
          </navigator>
        </view>
      </view>
    </view>
    <!-- 4.0 楼层 -->
  </view>
</template>

<script>
  export default {
    data() {
      return {
        swiperList: [], // 轮播图数组
        navs: [], //导航数组
        floorList: [] // 楼层数组
      }
    },
    async onLoad() {
      Promise.all([this.getSwiperList(), this.getNavs(), this.getFloorList()])
    },
    methods: {
      // 获取轮播图
      async getSwiperList() {
        console.log('1')
        const { message: swiperList } = await uni.$u.http.get('/home/swiperdata')
        this.swiperList = swiperList
        console.log('1 end')
      },
      // 获取导航
      async getNavs() {
        console.log('2')
        const { message: navs } = await uni.$u.http.get('/home/catitems')
        this.navs = navs
        console.log('2 end')
      },
      // 获取楼层
      async getFloorList() {
        console.log('3')
        const { message: floorList } = await uni.$u.http.get('/home/floordata')
        this.floorList = floorList
        console.log('3 end')
      }
    }
  }
</script>

<style lang="scss">
/* 
移动端页面  
自适应   屏幕越大 元素就越大  rpx vw 

将设计稿的大小设置为 375px
750rpx =  375px

1px = 2rpx

750rpx = 750px
1px 
 */
.top-search {
  padding: 10rpx;
  background-color: #eb4450;
}
.navs {
  display: flex;
  navigator {
    flex: 1;
    padding: 20rpx;
  }
}

.floor {
  .floor-group-content {
    // 清除浮动
    overflow: hidden;
    navigator {
      width: 232rpx;
      margin-left: 15rpx;
      float: left;

      /* 
      几张图片的大小不一致 无法直接使用图片高度自适应的设置 
      得要靠自己去计算图片的高度
      1 第一张图片的高度 当时可以使用高度自适应。。
      2 后四张图片的高度，手动去计算，高度等于第一张图片高度的一半即可！！ 
      
       */

      /* 后四个导航标签 */
      // &:nth-last-child(-n + 4) {
      //   image {
      //     height: 188rpx;
      //   }
      // }

      &:nth-last-child(-n + 2) {
        // 后两个导航标签
        margin-top: 15rpx;
      }
    }
  }
}
</style>